﻿<template>
    <div class="table">
        <div class="divSearch">
            <Row>
                <Col v-show="userinfo.AreaCode=='530000000000'">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
            <!--搜索框-->
                <Col>
                    <label class="searchLabel">填报年度:</label>
                    <Select v-model="searchModel.FillInYear" @on-change="getStatsData()" placeholder="请选择..." :label-in-value="true" clearable class="searchInput">
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <Col >
                    <Button type="primary" @click="DataExport()"  class="searchRight" icon="log-out" >数据导出</Button>
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="totalLable"><Icon type="ios-list-outline" size="10"></Icon>&nbsp;列表</span></Radio>
                        <Radio label="barShow" title="柱状图"><span class="totalLable"><Icon type="stats-bars" size="10"></Icon>&nbsp;柱状图</span></Radio>   
                        <Radio label="mapShow" title="地图"><span class="totalLable"><Icon type="map" size="10"></Icon>&nbsp;地图</span></Radio>                                                                               
                    </RadioGroup> 
                </Col>
            </Row>
        </div>
        <!-- 列表 -->
        <Row  v-show="listShow">
            <Col>
                <div style="width:100%;overflow:scroll;">
            <table class="ContentTable"  style="width:120%;">
                <caption>
                    <div><span class="tableNum">表9——{{searchModel.FillInYear}}&nbsp;{{userinfo.AreaCode|omgAreaName}}&nbsp;养蚕收益情况调查表(抽样统计)</span>
                        <span class="tip">单位：亩、张、kg、元/kg、元/张、元/亩</span>
                    </div>
                </caption>
                <thead>
                    <tr>
                        <th rowspan="2" style="width:72px;">序号</th>
                        <th rowspan="2" style="width:72px;">县（市、区）</th>
                        <!-- <th rowspan="2">农户姓名</th>
                        <th colspan="2">桑地类型</th>
                        <th rowspan="2">树龄</th>
                        <th rowspan="2">种植规格</th>
                        <th rowspan="2">桑园海拔</th>
                        <th colspan="3">剪伐方式</th> -->
                        <th rowspan="2">桑园面积<br/>（亩）</th>
                        <th colspan="5">养蚕量<br/>（张）</th>
                        <th colspan="5">鲜茧产量<br/>（kg）</th>
                        <th colspan="5">鲜茧价格<br/>（元/kg）</th>
                        <th colspan="2">蚕沙</th>
                        <th rowspan="2">平均亩桑效益<br/>（元/亩）</th>
                        <th rowspan="2">平均张种效益<br/>（元/张）</th>
                    </tr>
                    <tr>
                        <!-- <th>田桑</th>
                        <th>地桑</th>
                        <th>春伐</th>
                        <th>夏伐</th>
                        <th>早秋伐</th> -->
                        <th>合计</th>
                        <th>春</th>
                        <th>夏</th>
                        <th>正秋</th>
                        <th>晚秋</th>
                        <th>合计</th>
                        <th>春</th>
                        <th>夏</th>
                        <th>正秋</th>
                        <th>晚秋</th>
                        <th>均价</th>
                        <th>春</th>
                        <th>夏</th>
                        <th>正秋</th>
                        <th>晚秋</th>
                        <th>产量<br/>（公斤）</th>
                        <th>价格<br/>（元/公斤）</th>
                    </tr>
                    <tr v-if="datas.length>0">
                        <td style="width:72px;">1</td>
                        <td style="width:72px;">{{datas[0].AreaName}}</td>
                        <!-- <td >{{datas[0].HouseName}}</td>
                        <td  v-show="datas[0].SanType=='田桑'">√{{datas[0].SanType_T}}</td>
                        <td  v-show="datas[0].SanType!='田桑'||datas[0].SanType==null">{{datas[0].SanType_T}}</td>
                        <td  v-show="datas[0].SanType=='地桑'">√{{datas[0].SanType_D}}</td>
                        <td  v-show="datas[0].SanType!='地桑'||datas[0].SanType==null">{{datas[0].SanType_D}}</td>
                        <td >{{datas[0].Age}}</td>
                        <td >{{datas[0].PlantSanc}}</td>
                        <td >{{datas[0].Elevation}}</td>
                        <td  v-show="datas[0].CutMethod=='春伐'||datas[0].CutMethod=='全部'">√{{datas[0].CutMethod_C}}</td>
                        <td  v-show="datas[0].CutMethod!='春伐'&&datas[0].CutMethod!='全部'">{{datas[0].CutMethod_C}}</td>
                        <td  v-show="datas[0].CutMethod=='夏伐'||datas[0].CutMethod=='全部'">√{{datas[0].CutMethod_X}}</td>
                        <td  v-show="datas[0].CutMethod!='夏伐'&&datas[0].CutMethod!='全部'">{{datas[0].CutMethod_X}}</td>
                        <td  v-show="datas[0].CutMethod=='早秋伐'||datas[0].CutMethod=='全部'">√{{datas[0].CutMethod_ZQF}}</td>
                        <td  v-show="datas[0].CutMethod!='早秋伐'&&datas[0].CutMethod!='全部'">{{datas[0].CutMethod_ZQF}}</td> -->
                        <td >{{datas[0].MulArea|decimal|formatCurrency}}</td>
                        <td >{{datas[0].Silkworm|integer|formatCurrency}}</td>
                        <td >{{datas[0].SilkwormSpring|integer|formatCurrency}}</td>
                        <td >{{datas[0].SilkwormSummer|integer|formatCurrency}}</td>
                        <td >{{datas[0].SilkwormIsAutumn|integer|formatCurrency}}</td>
                        <td >{{datas[0].SilkwormLateAutumn|integer|formatCurrency}}</td>
                        <td >{{datas[0].Fresh|decimal|formatCurrency}}</td>
                        <td >{{datas[0].FreshSpring|decimal|formatCurrency}}</td>
                        <td >{{datas[0].FreshSummer|decimal|formatCurrency}}</td>
                        <td >{{datas[0].FreshIsAutumn|decimal|formatCurrency}}</td>
                        <td >{{datas[0].FreshLateAutumn|decimal|formatCurrency}}</td>
                        <td >{{datas[0].Price|decimal|formatCurrency}}</td>
                        <td >{{datas[0].PriceSpring|decimal|formatCurrency}}</td>
                        <td >{{datas[0].PriceSummer|decimal|formatCurrency}}</td>
                        <td >{{datas[0].PriceIsAutumn|decimal|formatCurrency}}</td>
                        <td >{{datas[0].PriceLateAutumn |decimal|formatCurrency}}</td>
                        <td >{{datas[0].SilkwormYield|decimal|formatCurrency}}</td>
                        <td >{{datas[0].SilkwormPrice |decimal|formatCurrency}}</td>
                        <td >{{datas[0].AverageBenefit |decimal|formatCurrency}}</td>
                        <td >{{datas[0].Aver |decimal|formatCurrency}}</td>
                    </tr>
                </thead>
                <tbody v-if="newDatas.length>0" style="max-height:380px">
                    <tr v-for="(item,index) in newDatas" :key="item.FillInYear">
                        <td style="width:72px;">{{index+2}}</td>
                        <!-- <td style="width:72px;">{{item.FillYear}}</td> -->
                        <td style="width:72px;">{{item.AreaName}}</td>
                        <!-- <td >{{item.HouseName}}</td>
                        <td  v-show="item.SanType=='田桑'">√{{item.SanType_T}}</td>
                        <td  v-show="item.SanType!='田桑'||item.SanType==null">{{item.SanType_T}}</td>
                        <td  v-show="item.SanType=='地桑'">√{{item.SanType_D}}</td>
                        <td  v-show="item.SanType!='地桑'||item.SanType==null">{{item.SanType_D}}</td>
                        <td >{{item.Age}}</td>
                        <td >{{item.PlantSanc}}</td>
                        <td >{{item.Elevation}}</td>
                        <td  v-show="item.CutMethod=='春伐'||item.CutMethod=='全部'">√{{item.CutMethod_C}}</td>
                        <td  v-show="item.CutMethod!='春伐'&&item.CutMethod!='全部'">{{item.CutMethod_C}}</td>
                        <td  v-show="item.CutMethod=='夏伐'||item.CutMethod=='全部'">√{{item.CutMethod_X}}</td>
                        <td  v-show="item.CutMethod!='夏伐'&&item.CutMethod!='全部'">{{item.CutMethod_X}}</td>
                        <td  v-show="item.CutMethod=='早秋伐'||item.CutMethod=='全部'">√{{item.CutMethod_ZQF}}</td>
                        <td  v-show="item.CutMethod!='早秋伐'&&item.CutMethod!='全部'">{{item.CutMethod_ZQF}}</td> -->
                        <td >{{item.MulArea|decimal|formatCurrency}}</td>
                        <td >{{item.Silkworm|integer|formatCurrency}}</td>
                        <td >{{item.SilkwormSpring|integer|formatCurrency}}</td>
                        <td >{{item.SilkwormSummer|integer|formatCurrency}}</td>
                        <td >{{item.SilkwormIsAutumn|integer|formatCurrency}}</td>
                        <td >{{item.SilkwormLateAutumn|integer|formatCurrency}}</td>
                        <td >{{item.Fresh|decimal|formatCurrency}}</td>
                        <td >{{item.FreshSpring|decimal|formatCurrency}}</td>
                        <td >{{item.FreshSummer|decimal|formatCurrency}}</td>
                        <td >{{item.FreshIsAutumn|decimal|formatCurrency}}</td>
                        <td >{{item.FreshLateAutumn|decimal|formatCurrency}}</td>
                        <td >{{item.Price|decimal|formatCurrency}}</td>
                        <td >{{item.PriceSpring|decimal|formatCurrency}}</td>
                        <td >{{item.PriceSummer|decimal|formatCurrency}}</td>
                        <td >{{item.PriceIsAutumn|decimal|formatCurrency}}</td>
                        <td >{{item.PriceLateAutumn|decimal|formatCurrency}}</td>
                        <td >{{item.SilkwormYield|decimal|formatCurrency}}</td>
                        <td >{{item.SilkwormPrice|decimal|formatCurrency}}</td>
                        <td >{{item.AverageBenefit|decimal|formatCurrency}}</td>
                        <td >{{item.Aver|decimal|formatCurrency}}</td>
                    </tr>
                </tbody>
            </table>
                </div>
            </Col>
        </Row>
        <Row v-show="barShow">
            <Col>
            <!--饼图-->
                <div  id="divBar">柱状图</div>
            </Col>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <div id="divMap">地图</div>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("CSuserinfo").AreaCode),
            CurrentAreaName:'',
            CheckButton:'listShow',
            userinfo: this.GetlocaStorage("CSuserinfo"),//获取当前用户信息
            datas:[],//列表数据
            newDatas:[],//去除合计的数据集合
            //柱状图数据
            echartsItem:['平均亩桑效益','平均张种效益'],
            AreaData:[],
            AverageBenefitData:[],//平均亩桑效益
            AverData:[],//平均张种效益
            barList:[],
            //地图数据
            mapList:[],
            MapAverageBenefitData:[],//平均亩桑效益
            MapAverData:[],//平均张种效益
            mapType:'',//当前加载的地图模板
            GeoData:'',//top值
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'MulAnnualProducStatist',
                FillInYear: '',
                TimesType: '',
                AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                Opinion: ''
            },
            clientHeight: window.innerHeight - 220,//表格默认高度
            listShow:true,//列表显示控制器
            barShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
        }
    },
    //高度计算
     mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 220;
            })()
        };
    },
    //方法
    methods: {  
         //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
                this.mapShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示柱状图
                this.mapShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.barShow=false;//显示地图
                this.mapShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
                 this.mapShow=false;
            }
        },
        //获取地区统计数据
        getStatsData(){
            var self = this;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            self.AreaData=[],
            self.AverageBenefitData=[],//平均亩桑效益
            self.AverData=[],//平均张种效益
             self.barList=[],
             self.datas=[],
             self.newDatas=[],
            //地图数据
            self.mapList=[],
            self.MapAverageBenefitData=[],//平均亩桑效益
            self.MapAverData=[],//平均张种效益
            self.mapType=self.searchModel.AreaCode;
            self.GeoData=self.GetGeoData(self.mapType);
            self.$http.post('MulSerEarnSurvey/PostStatsList', self.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    if (res.data.model!=null&&res.data.model.length>0) {
                        self.datas=res.data.model;//列表赋值
                        for(var i=0;i<res.data.model.length;i++){
                            self.newDatas[i-1] = res.data.model[i];
                            //柱状图数据
                            self.AreaData.push(res.data.model[i].AreaName);
                            self.AverageBenefitData.push(res.data.model[i].AverageBenefit);//平均亩桑效益
                            self.AverData.push(res.data.model[i].Aver);//平均张种效益
                            self.MapAverageBenefitData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AverageBenefit});//平均亩桑效益
                            self.MapAverData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].Aver});//平均张种效益
                        }
                        self.barList.push(self.AverageBenefitData,self.AverData);
                        //地图数据
                        self.mapList.push(self.MapAverageBenefitData,self.MapAverData);
                        self.showEcharts();
                    }
                }
                else {
                    self.$Modal.warning({
                    title: '提示信息',
                    content: res.data.message
                    });
                }
            });
        },
        GetData(obj){
            this.getStatsData(obj);
        },
        DataExport(){
            //导出
           var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            window.open(this.$http.defaults.baseURL + "MulSerEarnSurvey/GetStatsExcelData?FillInYear=" + self.searchModel.FillInYear+"&&AreaCode=" + user.AreaCode+"&&Status=" + self.searchModel.Status);
        },
                //展示柱状图和地图代码
        showEcharts(){
            //************************显示柱状图
            var self=this;
            var containerBar=document.getElementById('divBar');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBar.style.height = (window.innerHeight-240)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBar = myEcharts.init(containerBar, 'shine');
            var BarName='表9——'+self.searchModel.FillInYear+self.CurrentAreaName+'养蚕收益情况柱状统计图(抽样统计)';
            var optionBar = self.GetBarOption(BarName,self.AreaData,self.echartsItem,self.barList,'bar');
            myBar.setOption(optionBar);
            //柱状图展示完
            //******************显示地图
            var containerMap=document.getElementById('divMap');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerMap.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerMap.style.height = (window.innerHeight-260)+'px';
            };
            //geo数据完
            //设置容器高宽
            resizeContainerMap();
            var myMap = myEcharts.init(containerMap, 'shine');
            var MapName='表9——'+self.searchModel.FillInYear+self.CurrentAreaName+'养蚕收益情况统计地区分布图(抽样统计)';
            var optionMap = self.GetMapOption(MapName,self.GeoData,self.mapType,self.echartsItem,self.mapList);
            myMap.setOption(optionMap);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myMap.resize();
                myBar.resize();
            };
        }
    },
    //创建Vue页面方法
    created: function () { 
        this.SearchAreaList();//获取地区统计数据
        this.getStatsData();
        // this.GetData({label:'现有桑园',value:'1'});
        // this.getStatsData({label:'现有桑园',value:'1'});   //获取地区统计数据      
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
